<template>
  <div class="app-container">
    <el-form
      ref="dataForm"
      :model="dataForm"
    >
      <el-form-item label="上传文件" prop="title" :label-width="formLabelWidth">
        <el-upload
          drag
          action="http://localhost/dev-api/houses/premises/upload"
          :before-upload="handleUploadPreview"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :headers="uploadHeaders"
          limit="10"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">文件不得超过25M</div>
        </el-upload>

        <!--<el-upload-->
        <!--  class="upload-demo"-->
        <!--  action="http://localhost:9499/premises/upload"-->
        <!--  :before-upload="handleUploadPreview"-->
        <!--  :on-success="handleUploadSuccess"-->
        <!--  :on-error="handleUploadError"-->
        <!--  :headers="uploadHeaders"-->
        <!--  limit="10"-->
        <!--  list-type="picture">-->
        <!--  <el-button size="small" type="primary">点击上传</el-button>-->
        <!--  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        <!--</el-upload>-->
      </el-form-item>

      <el-form-item label="原文件名" prop="originName" :label-width="formLabelWidth">
        <el-input  :disabled="true" v-model="dataForm.originName" placeholder="请输入原文件名"/>
      </el-form-item>

      <el-form-item label="大小" prop="fileSize" :label-width="formLabelWidth">
        <el-input  :disabled="true" v-model="dataForm.fileSize" placeholder="请输入文件大小" />
      </el-form-item>

      <el-form-item label="下载地址" prop="url" :label-width="formLabelWidth">
        <el-input :disabled="true" v-model="dataForm.url" placeholder="请输入下载地址" />
        <el-link :underline="false" type="primary" :href="dataForm.url">下载</el-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      formLabelWidth: '120px',
      uploadHeaders:{},
      dataForm: {
        fileSize: '',
        type: '',
        downloads: '',
      },
    }
  },
  created() {
    this.uploadHeaders={//设置授权的Token
      'Authorization': 'Bearer ' + getToken(),
    }
  },
  methods: {
    clipboardSuccess() {
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: 1500
      })
    },
    handleUploadPreview(file) {//文件上传进行大小判断
      console.log(file);
      const isLt2M = file.size / 1024 / 1024 < 25;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 25MB!');
      }
      return isLt2M;
    },
    handleUploadSuccess(res, file) {//处理成功后的设置
      if (res.code === 200) {
        this.$message.success('上传成功')
        this.dataForm.url = res.data.url
        this.dataForm.fileSize = res.data.size
        this.dataForm.originName = res.data.originName
        console.log(JSON.stringify(this.dataForm))

      } else {
        this.$message.success(res.msg)
      }
    },
    handleUploadError(err, file) {
      this.$message.error("失败" + err)
    },

  }
}
</script>
